<template>
  <div class="assembly-container" id="assembly-container">
    <div :class="[fixed?'fixed':'']" id="assembly-container-fixed">
      <div class="assembly-group" v-for="(item,index) in assemblyList" :key="index">
        <h3>{{item.title}}</h3>
        <div class="list">
          <el-row :gutter="10">
            <draggable v-model="item.list"
                       forceFallback="true"
                       :options="{group:{name: item.group,pull:'clone'},sort: false}"
                       animation="300">
              <transition-group>
                <div class="assembly-item" v-for="child in item.list"
                     :key="child.type" :data-type="child.type">
                  <img :src="require('../../assets/image/'+child.icon)"/>
                  <span>{{child.label}}</span>
                </div>
              </transition-group>
            </draggable>
          </el-row>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    import assembly from '@/config/assembly';
    import draggable from 'vuedraggable';

    export default {
        name: 'AssemblyList',
        data() {
            return {
                assemblyList: assembly.assemblyList,
                fixed: false,
                fixedRight: false,
                width: 0
            }
        },
        components: {
            draggable
        },
        mounted() {
            window.addEventListener("scroll", this.handleScroll);
        },
        destroyed() {
            document.removeEventListener('scroll', this.handleScroll)
        },
        methods: {
            handleScroll() {
                //获取滚动时的高度
                let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop;
                const fixed = this.fixed;
                const fixedRight = this.fixedRight;
                if (!fixed && scrollTop > 100) {
                    //大于200的时候要做的操作
                    this.fixed = true;
                    const div = document.getElementById("assembly-container");
                    const w = div.offsetWidth;    // 返回元素的总宽度
                    document.getElementById("assembly-container-fixed").style.width = w - 40 + 'px';
                } else if (fixed && scrollTop <= 100) {
                    //大于200的时候要做的操作
                    this.fixed = false;
                    document.getElementById("assembly-container-fixed").style.width = 'unset';
                }
                if (!fixedRight && scrollTop > 100) {
                    //大于200的时候要做的操作
                    this.fixedRight = true;
                    const div = document.getElementById("right-container-temp");
                    const w = div.offsetWidth;    // 返回元素的总宽度
                    document.getElementById("right-container").style.width = w + 'px';
                    document.getElementById("right-container").className = 'right-container fixed';
                } else if (fixedRight && scrollTop <= 100) {
                    //大于200的时候要做的操作
                    this.fixedRight = false;
                    document.getElementById("right-container").style.width = 'unset';
                    document.getElementById("right-container").className = 'right-container';
                }
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
  @import "assembly";
</style>
